@charset"utf-8";
*{margin:0;padding:0}
body{font-family:"Microsoft yahei";font-size:14px;min-width: 1200px;
  background: #e3e3e3;}
img,fieldset{border:0}
ul,ol,li{list-style:none}
em,address{font-style:normal}
a{color:#000;font-size:14px;text-decoration:none;outline:0}
table {  border-collapse: collapse;  border-spacing: 0;  }
input,button,textarea,select{outline:medium none}
input{margin:0;padding:0;background:transparent none;-webkit-border-radius:inherit;border-radius:inherit;font-family:Arial,Helvetica,sans-serif}
.clear{height:0;line-height:0;font-size:0;clear:both}
.clearfix{zoom:1}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.fl{float:left}
.fr{float:right}
.wrap{width:1200px;margin:0 auto;}
.container{width:1200px;margin:0 auto;background: #fff;}
@mixin Triangle($color:#fff,$width:7px){
  display: inline-block;
  height: 0;
  width: 0;
  line-height: 0;
  font-size: 0;
  border-width: $width;
  border-style: solid dashed dashed dashed;
  border-color: $color transparent transparent transparent;
  position: relative;
  z-index: 1;
}
@mixin bg(){
  background: url(../img/icon.png) no-repeat;
}
.topbar{
  height: 40px;
  background: #ffffff;
  border-bottom: 1px solid #ccc;
  color: #999;
  ul{
    li{
      position: relative;
      float: left;
      height: 40px;
      line-height: 40px;
      background: url(../img/border.png) no-repeat right center;
      &.border{
        width: 1px;
      }
    }
  }
  img{vertical-align:middle;margin-right: 15px;}
  .btn{
    width: 146px;
    height: 40px;
    line-height: 40px;
    color: #999999;
    display: inline-block;
    text-align: center;
    font-size: 13px;
    transition: background-color  .8s;
    -webkit-transition: background-color .8s;
    &:hover,&.active{
      background-color: #bda770;
      color: #fff;
      b{
        border-top-color: #fff;
      }
    }
    b{
      vertical-align: -3px;
      margin-left: 5px;
      @include Triangle(#999,5px);
    }
  }
  .area{
    padding: 0 4px;
  }
  .search em,.global em{
    display: inline-block;
    @include bg;
    vertical-align: middle;
  }
  .search{
    width: 34px;
    margin-right: -1px;
    padding: 0 4px;
    &:hover{
      em{
        background-position: -26px -65px;
      }
    }
    em {
      background-position: -4px -65px;
      width: 20px;
      height: 20px;

    }

  }

  .global {
    width: 63px;
    &:hover{
      em{
        background-position: -68px -66px;
      }
    }
    em {
      background-position: -47px -66px;
      width: 23px;
      height: 19px;
    }
  }
  input[type="text"]{
    display: inline-block;
    border: solid 1px #9e9e9e;
    outline: medium none;
    height: 18px;
    width: 102px;
    margin-left: 10px;
    &:focus{
      border: solid 1px #bda770;
    }
  }

}
.nav{

  .logo{
    float: left;
    img{vertical-align: middle;width: 200px;height: 98px }
  }
  position: relative;
  background: #fff;
  height: 100px;
  line-height: 100px;

  ul{float: right;
    li{
      height: 100px;
      float: left;
      position: relative;
      //&:hover{
      //  background: #bda770;
      //  color: #fff;
      //}
      a{
        display: block;
        text-align: center;
        color: #bda770;
        font-size: 15px;
        width: 125px;
        height: 100px;
        line-height: 25px;
        transition: background-color  .8s;
        -webkit-transition: background-color .8s;
        &:hover,&.active{
          background-color: #bda770;
          color: #fff;
          .b1 {
            background-position: -16px -32px;
          }
          .b2 {
            background-position: -54px -31px;
          }
          .b3{
            background-position: -89px -32px;
          }
          .b4{
            background-position: -124px -32px;
          }
          .b5{
            background-position: -164px -32px;
          }
          .b6{
            background-position: -202px -32px;
          }
          .b7{
            background-position: -236px -32px;
          }
          .b8{
            background-position: -275px -33px;
          }

        }
        b {
          display: inline-block;
          width: 23px;
          height: 28px;
          background: url(../img/icon.png) no-repeat #ddd;
          margin-top: 23px;
          @include bg;
          &.b1{
            background-position: -16px -1px;

          }
          &.b2{
            background-position: -54px 0px;;
          }

          &.b3{
            background-position:-89px -1px;
            width: 24px;
          }
          &.b4{
            background-position: -124px -1px;
            width: 30px;
          }
          &.b5{
            background-position: -164px -1px;
          }
          &.b6{
            background-position: -202px -1px;
          }
          &.b7{
            background-position: -236px -1px;
            width: 27px;
          }
          &.b8{
            background-position: -275px -2px;
          }


        }

      }
    }
  }

}
.banner {
  height: 628px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 9;

  .bd {
    li {
      width:100%;
      height: 628px;
      a{
        width:100%;
        display: block;
        height: 628px;
      }
    }
  }
.operation {
  position: absolute;
  bottom:30px;
  left: 50%;
  margin-left: 514px;
  height: 21px;
  line-height: 21px;
  .pageState{
    color: #fff;
    font-size: 13px;
    letter-spacing: 4px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    span{
      color: #bda770;
    }
  }
  a{
    @include bg;
    display: inline-block;
    width: 65px;
    height: 90px;
    width: 13px;
    height: 21px;
    &:hover{
      opacity: .8;
    }

  }


  .prev {  background-position: -91px -64px;
     margin-right: 5px;
  }
  .next {
    background-position:-121px -64px;

  }
}
}
